<template>
  <div>
    <div>
      <div ref="bar" style="width:3.6rem;height:2rem"></div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts/lib/echarts");
import fontSizeRem from "../utils/remtopx.js";
export default {
  props: {
    formObj: {}
  },
  data() {
    return {};
  },
  watch: {
    formObj: {
      handler(val) {
        this.$nextTick(() => {
          this.setBar();
        });
      },
      deep: true
    }
  },
  methods: {
    setBar() {
      var myChart = this.$echarts.init(this.$refs.bar);
      let that = this;
      let data = [
        { value: this.formObj.cycleVideo, name: "视频" },
        { value: this.formObj.cycleWord, name: "文字\n(路况)" },
        { value: this.formObj.cycleAudio, name: "音频\n(路况)" },
        // { value: 1, name: "图文" }
        { value: this.formObj.cyclePhoto, name: "图文" }
        // { value: this.formObj.road, name: "路况信息" }
      ];

      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: "pie",
            radius: ["45%", "70%"],
            center: ["50%", "50%"],
            color: ["#f4652e", "#3db077", "#1890ff", "#ffd666"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            // startAngle:10,
            minAngle: 20,
            label: {
              normal: {
                show: true,
                // formatter: val => {
                //   let str = "";
                //   if (val.data.value) {
                //     str = val.name;
                //   }

                //   return str;
                // },
                textStyle: {
                  fontSize: fontSizeRem.fontSize(0.12)
                },
                // padding: [0, -20], 
                // rotate: "-45"
              }
            },
            labelLine: {
              show: true,
              length:fontSizeRem.fontSize(0.1)
            },
            data: data
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  margin-bottom: 0.26rem;
}
.tuli {
  ul {
    li {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 0.04rem 0;
      text-align: left;
      .colorBlock {
        width: 0.06rem;
        height: 0.06rem;
        margin-right: 0.05rem;
      }
      .textCon {
        margin-right: 0.05rem;
      }
    }
  }
}
</style>